<template>   
  <router-view></router-view>
  <div class="myPage">
    <div class="head">
      <span class="empty">
        <van-icon name="setting-o" @click="myOptions"/>    
      </span>
      <van-icon name="chat-o"  @click="message"/>
    </div>


    <div class="userWrap" v-show="Login">
      <div class="userInfo">
        <span>欢迎来到手工客</span>
        <br />
        <span @click="login" class="login">登 录
         
        </span>
        <span @click="register" class="register">注 册</span>
       
      </div>  
    </div>

  <div class="userWrap" @click="allInfo" v-show="!Login">
        <div class="userAvatar">
          <img src="@/assets/head.jpg" alt="" />
        </div>
        <div class=" userInfo1">
          <span>手工客123</span>
          <br />
          <span >关注 2 粉丝 1</span>
        </div>
        <div class="userWebsite">
          <span>个人主页</span>
        </div>
      </div>



    <div class="shopping">
      <div class="cart">
        1
        <br />
        <span @click="My_cart" class="shoppingSpan">购物车</span>
      </div>
      <span class="shoppingSpan">|</span>
      <div class="storeUp">
        1
        <br />
        <span @click="allCol" class="shoppingSpan">收藏</span>
      </div>
    </div>
    <div class="center">
      <div class="OrdersCentre">
        订单中心
        <van-grid :column-num="5" :border="false">
          <van-grid-item @click="myOrder(0)">
            <svg class="icon" aria-hidden="true" >
               <use xlink:href="#icon-quanbudingdan1"></use>
            </svg>
            <span class="ordersCentreSpan">全部</span>
          </van-grid-item>
          <van-grid-item @click="myOrder(1)">
            <svg class="icon" aria-hidden="true" >
               <use xlink:href="#icon-daifukuan"></use>
            </svg>
            <span class="ordersCentreSpan">待付款</span>
          </van-grid-item>
          <van-grid-item @click="myOrder(2)">
            <svg class="icon" aria-hidden="true" >
               <use xlink:href="#icon-daifahuo"></use>
            </svg>
            <span class="ordersCentreSpan">待发货</span>
          </van-grid-item>
          <van-grid-item @click="myOrder(3)">
            <svg class="icon" aria-hidden="true" >
               <use xlink:href="#icon-daishouhuo"></use>
            </svg>
            <span class="ordersCentreSpan">待收货</span>
          </van-grid-item>
          <van-grid-item @click="myOrder(4)">
            <svg class="icon" aria-hidden="true" >
               <use xlink:href="#icon-daipingjia"></use>
            </svg>
            <span class="ordersCentreSpan">待评价</span>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="ServiceCentre OrdersCentre">
        服务中心
        <van-grid :border="false">
          <van-grid-item @click="participateClass">
            <svg class="icon" aria-hidden="true" >
               <use xlink:href="#icon-kecheng"></use>
            </svg>
            <span class="ordersCentreSpan">参与课程</span>
          </van-grid-item>
          <van-grid-item @click="officialService">
            <svg class="icon" aria-hidden="true" >
               <use xlink:href="#icon-kefu"></use>
            </svg>
            <span class="ordersCentreSpan">官方客服</span>
          </van-grid-item>
          <van-grid-item @click="dataBase">
            <svg class="icon" aria-hidden="true" >
               <use xlink:href="#icon-ziliaoku"></use>
            </svg>
            <span class="ordersCentreSpan">资料库</span>
          </van-grid-item>
          <van-grid-item @click="draftBox">
            <svg class="icon" aria-hidden="true" >
               <use xlink:href="#icon-caogaoxiang"></use>
            </svg>
            <span class="ordersCentreSpan">草稿箱
           
            </span>
          </van-grid-item>
         
        </van-grid>
      </div>

    </div>
  </div>


</template>
    
<script setup lang='ts'>
  import { onMounted, ref } from "vue";
  import {useRouter} from 'vue-router'
  const router = useRouter()
  const Login = ref(true)
  onMounted(()=>{
    let is_login = localStorage.getItem('token')
    if(is_login){
      console.log('已登录'); 
      Login.value = false
    }else{
      console.log('未登录');
      Login.value = true
    }
  })
  function myOptions() {
    router.push(
      {
         name:'myOptions', 
      }
    )
  }
  function message() {
    router.push(
      {
         path:'/xiao_xi', 
      }
    )
  }
  function login() {
    router.push(
      {
        name:"login"
      }
    )
  }
  function register() {
    router.push(
      {
        name:"register"
      }
    )
  }
  function allInfo() {
      router.push(
        {
          name:"allInfo"
        }
      )
    }
  function myOrder(i:any) {
    router.push(
      {
         name:'myOrder',
         query:{
          myindex:i
         }
      }
    )
  }
  function participateClass() {
    router.push({
      name:"participateClass"
    })
  }
  function officialService() {
    router.push({
      name:"officialService"
    })
  }
  function dataBase() {
    router.push({
      name:"dataBase"
    })
  }
  
  function draftBox() {
    router.push({
      name:"draftBox"
    })
  }
  function allCol() {
    router.push({
        name:"allCol"
      })
  }
 
  function My_cart() {
    router.push({
        path:"/my_cart"
      })
  }

</script>
    
<style scoped>
.myPage {
  padding: 10px;
}
.head {
  float: right;
  font-size: 25px;
  color: gray;
  margin-right: 10px;
}
.empty {
  margin-right: 20px;
}
.userWrap {
  width: 100%;
  display: flex;
}
.userAvatar .userWebsite {
    flex: 1;
  }

.userInfo {
  flex: 2;
  line-height: 25px;
}
.userInfo1{
  flex: 2;
  line-height: 25px;
}

.userInfo > span:nth-child(3) ,.userInfo > span:nth-child(4) {
  /* color: gray; */
  font-size: 10px;
  padding: 5px;
  border: 1px solid red;
border-radius: 5px;
}
.userAvatar > img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .userInfo1 > span:nth-child(3) {
    color: gray;
    font-size: 10px;
  }
  .userWebsite{
      display: flex;
      align-items: flex-end;
  }
  .userWebsite > span {
    background: red;
    border-radius: 10px;
    padding: 5px;
    font-size: 10px;
    color: white;
  }


.shopping {
  display: flex;
  align-items: center;
}
.shopping > div {
  flex: 1;
  text-align: center;
}
.shoppingSpan {
  color: gray;
  font-size: 12px;
}
.center{
    margin-top: 20px;
}
.OrdersCentre{
    height: 100px;
    padding: 10px;
    border: 1px solid gainsboro;
    border-radius: 5px;
    box-shadow:0px 0px 2px 1px #ece8e8da ;
    margin-top: 8px;
}
.icon{
  font-size: 30px;
}
.ordersCentreSpan{
  font-size: 12px;
  margin-top: 5px;
}

.login{
  background-color: red;
  color:white;
}
.register{
  margin-left: 8px;
  color: red;
}

</style>